<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/4 0004
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <style>
        #c1{
           font-size: 30px;
            text-align: center;
        }
        #m1 {
            font-size: 30px;
            background-color: #0099CC;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body bgcolor="#ffc5e9">
      <center>
          <br>
          <br>
          <form action="studentServlet" method="post">
              <input type="hidden" name="mark" value="dimQueryStudent">
              姓名:<input type="text" style="color: red ;background-color: #0099CC" name="sname" value="${sname }">
              &nbsp;&nbsp;&nbsp;&nbsp;

              性别:<select style="background-color: #0099CC" name="sex" id="">
              <option value="">请选择</option>
              <option value="男"
                      <c:if test="sex=='男‘">selected</c:if>>男</option>
              <option value="女"
                      <c:if test="sex=='女‘">selected</c:if>>女</option>
              </select>&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="submit" style="background-color: #0099CC"  value="搜索">
          </form>
          888
        <table border="1" width="800px" bgcolor="#1e90ff">
            <caption id="c1"><h2>学生信息如下</h2></caption>
          <tr align="center">
              <th><input type="checkbox" id="inp"></th>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>生日</th>
              <th>爱好</th>
              <th>图像</th>
              <th>操作</th>
          </tr>
          <c:forEach items="${studentLists }" var="s" varStatus="status">
            <tr align="center">
                <td>
                    <input type="checkbox" class="class" value="${s.sid }">
                </td>
<%--                <td>--%>
<%--                    <input type="checkbox" name="id" value="${s.sid }">--%>
<%--                </td>--%>
<%--              只是添加了一列序号  指定他的索引从1开始--%>
              <td>${status.index +1}</td>
              <td>${s.sname }</td>
              <td>${s.sex }</td>
              <td>
                <!-- 用到了fmt formatDate标签 格式化日期
                value 要格式化的数 pattern 格式化的格式-->
                <fmt:formatDate value="${s.sbir}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
              </td>
              <td>${s.hobby }</td>
              <!-- 显示图片  配置虚拟路径 -->
              <td>
              <img src="http://localhost:8080/photo/${s.photo }" width="50px" alt="">
              </td>
              <td>
                  <a href="studentServlet?mark=queryStudentBySid&sid=${s.sid }">修改</a>
                  <a href="studentServlet?mark=deleteStudentBySid&sid=${s.sid }">删除</a>
              </td>
            </tr>
          </c:forEach>
        </table>
          <br>


        <span id="dang" style="color: #0099CC"><b>第${tl.currentpage}页</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="color: #0099CC"><b>总条数${tl.sumcount}</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="button" onclick="hao()" style="background-color: #0099CC" value="首页">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="jia()" style="background-color: #0099CC" value="上一页">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="huo()" style="background-color: #0099CC" value="下一页">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="hhh()" style="background-color: #0099CC" value="尾页"><br><br>

<%--        <a href="studentServlet?mark=pageQueryStudent">首页</a>&nbsp;</a>&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
<%--        <a href="studentServlet?mark=pageQueryStudent&currentpage=${tl.prepage }">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
<%--        <a href="studentServlet?mark=pageQueryStudent&currentpage=${tl.nextpage }">下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
<%--        <a href="studentServlet?mark=pageQueryStudent&currentpage=${tl.sumpage }">尾页</a>--%>

          <div>
              <button id="deleteButton" style="background-color: #0099CC" >批量删除</button>
          </div>
      </center>

</body>
</html>
<script>
    $("#inp").click(function (){
        var prop = $("#inp").prop("checked");
        $("input:not(#inp)").prop("checked",prop);
    })
    //批量删除
    $("#deleteButton").click(function (){
        if (confirm("你确定要删除吗？")){
        var str="";
        // $("input[name='id']:checked").each(function() {
        //     str+=","+$(this).val();
        // });
        $(".class:checked").each(function (){
            str+=","+$(this).val();
        });

            if (str==""){
                alert("别乱点")
            }else {
                location.href="studentServlet?mark=deleteStudent&sid1="+str;
        }
        }else {
            alert("下次小心点")
        }
    })
    //请求的方法是分页模糊的方法 既要满足分页又要满足条件的 携带的参数 当前页 sname  sex
    //如果不传递sex 和 sname 是针对表中所有数据进行分页
    //满足条件的分页
 //首页
  function hao(){
    window.location.href="studentServlet?mark=dimQueryStudent&sname=${sname }&sex=${sex }";
  }
  // 下一页
  function jia(){
    window.location.href="studentServlet?mark=dimQueryStudent&currentpage=${tl.prepage }&sname=${sname }&sex=${sex }"
  }
  //下一页
  function huo(){
    window.location.href="studentServlet?mark=dimQueryStudent&currentpage=${tl.nextpage }&sname=${sname }&sex=${sex }"

  }
  //尾页
  function hhh(){
    window.location.href="studentServlet?mark=dimQueryStudent&currentpage=${tl.sumpage }&sname=${sname }&sex=${sex }"
  }
</script>
